<template>
  <view class="bind-phone">
    <view class="main-title">绑定手机号</view>

    <view class="login-input betweenBox">
      <view class="input-warp">
        <input v-model="mobilePhone" class="ipt" placeholder="请输入手机号码" />
      </view>
      <view class="addon" @click="mobilePhone = ''">
        <server-image
          v-if="mobilePhone"
          class="del-icon disb"
          name="loginIcon20201020002.png"
        ></server-image>
      </view>
    </view>

    <view class="login-input betweenBox">
      <view class="input-warp">
        <input v-model="imgCode" class="ipt" placeholder="请输入图形验证码" />
      </view>
      <view class="addon">
        <c-image :src="imgCodePath" class-name="img-code disb" @click="initImgCode"></c-image>
      </view>
    </view>

    <view class="login-input betweenBox">
      <view class="input-warp">
        <input v-model="smsCode" class="ipt" placeholder="请输入验证码" />
      </view>
      <view class="addon">
        <view class="addon-warp flex-box">
          <view :class="{ deny: !canGetSmsCode }" class="v-code" @click="getSmsCode">
            <text v-if="canGetSmsCode">获取验证码</text>
            <text v-else>重新发送{{ countDown }}s</text>
          </view>
        </view>
      </view>
    </view>

    <view class="login-submit" @click="submit">提 交</view>
  </view>
</template>

<script>
import config from '@/common/config';
import { CountDown, loginInitStorageAndStore } from '@/common/utils';

export default {
  data() {
    return {
      mobilePhone: '',
      smsCode: '',
      imgCode: '',
      imgCodePath: '',
      canGetSmsCode: true,
      timer: null,
      countDown: 60,
      openId: '',
      key: '',
    };
  },
  onLoad(e) {
    if (e.openId) this.openId = e.openId;
    this.initImgCode();
  },
  methods: {
    initImgCode() {
      this.key = new Date().getTime();
      this.imgCodePath = config.baseUrl + '/member_veryCode.action?key=' + this.key;
      this.imgCode = '';
    },
    getSmsCode() {
      const vm = this;
      if (!vm.canGetSmsCode) return;
      if (!vm.imgCode) {
        this.showMessage({ title: '请输入图片验证码' });
        return;
      }
      vm.startCountDown();
      const params = {
        mobilePhone: vm.mobilePhone,
        verifyCode: vm.imgCode,
        key: vm.key,
        type: 7,
      };
      return vm.apiUrl.getCode({ data: params }).then(() => {
        vm.showMessage({ title: '验证码已发送' });
      });
    },
    startCountDown() {
      const vm = this;
      vm.canGetSmsCode = false;
      vm.countDown = 60;
      vm.timer = new CountDown(vm.countDown, (count) => {
        vm.countDown = count;
      });
      vm.timer.run().then(() => {
        vm.countDown = 0;
        vm.timer = null;
        vm.canGetSmsCode = true;
      });
    },
    checkField(params) {
      return new Promise((resolve, reject) => {
        if (!params.mobilePhone) return reject(new Error('请输入手机号码'));
        if (!params.openCode) return reject(new Error('缺少openId'));
        if (!params.smsCode) return reject(new Error('请输入短信验证码'));
        return resolve();
      });
    },
    submit() {
      const vm = this;
      const params = {
        mobilePhone: this.mobilePhone,
        openCode: this.openId,
        smsCode: this.smsCode,
      };

      vm
        .checkField(params)
        .then(() => {
          return vm.apiUrl.memberWxAppBind({ data: params }).then((res) => {
            const { code, msg:message='', data: rData } = res.data;
            if (code != 0) return Promise.reject(new Error(message));
            loginInitStorageAndStore(rData, vm);
            uni.switchTab({
              url: '/pages/member/member',
            });
          });
        })
        .catch((e) => {
          vm.showMessage({ title: e.message });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.bind-phone {
  padding-top: 60rpx;
  padding-left: 60rpx;
  padding-right: 60rpx;

  .login-input {
    height: 128rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #f4f4f4;
  }

  .input-warp {
    flex: 1;

    .ipt {
      height: 48rpx;
      font-size: 34rpx;
      font-weight: 400;
      //color: #B4B1AA;
      color: #333333;
      line-height: 48rpx;
    }
  }

  .del-icon {
    width: 30rpx !important;
    height: 30rpx !important;
    display: block;
    overflow: hidden;
  }

  .addon-warp {
    height: 40rpx;
    padding-left: 28rpx;
    border-left: 1px solid #b4b1aa;
  }

  .visible-icon {
    width: 36rpx !important;
    height: 21rpx !important;
    display: block;
    overflow: hidden;
  }

  .login-submit {
    width: 630rpx;
    height: 90rpx;
    background: #e64e2d;
    border-radius: 45rpx;
    text-align: center;
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 90rpx;
    margin-top: 130rpx;
  }
}

.main-title {
  height: 44rpx;
  font-size: 44rpx;
  font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  font-weight: bold;
  color: #333333;
  line-height: 66rpx;
  margin-bottom: 40rpx;
}

.img-code {
  width: 150rpx;
  height: 70rpx;
  display: block;
}

.v-code {
  height: 37rpx;
  line-height: 37rpx;

  text {
    font-size: 26rpx;
    color: #959595;
  }

  &.deny text {
    color: #b4b1aa;
  }
}
</style>
